<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="考试名称" prop="examName">
            <el-input v-model="dataForm.examName"></el-input>
          </el-form-item>
          <el-form-item label="考试分类" prop="cateId">
            <el-select v-model="dataForm.cateId" filterable placeholder="请选择">
              <el-option
                v-for="item in cateList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考试时间" required>
            <el-col :span="11">
              <el-form-item prop="startTime">
                <el-date-picker
                  type="datetime"
                  placeholder="选择日期"
                  v-model="dataForm.startTime"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="1">到</el-col>
            <el-col :span="11">
              <el-form-item prop="endTime">
                <el-date-picker
                  type="datetime"
                  placeholder="选择日期"
                  v-model="dataForm.endTime"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="答卷时长" prop="duration">
            <el-input v-model="dataForm.duration" style="width: 160px" type="number"></el-input>
          </el-form-item>
          <el-form-item label="及格分数" prop="passMark">
            <el-input v-model="dataForm.passMark" style="width: 160px" type="number"></el-input>
          </el-form-item>
          <el-form-item label="可考人员" prop="users">
            <el-button @click="getUserList">点击选择人员</el-button>
            <div
              v-if="selectedUserList.length > 0"
              style="display: flex;align-items: center;padding: 4px 8px;background: #F9F9F9;border-radius: 4px"
            >
              <div
                style="background: #ffffff; margin-right: 5px;border: 1px solid #F2F2F2;border-radius: 4px;padding: 0 10px"
                v-for="(item, index) in selectedUserList"
                :key="index"
              >
                <span>{{item.username}}</span>
                <i class="el-icon-delete" @click="handlerRemoveUser(index)"></i>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handlerSaveExam">保存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <div style="border: #ddd 1px solid;border-radius: 5px">
          <div
            style="display: flex;flex-direction: row;align-items: center;background: #fafafa;border-radius: 5px 5px 0 0;padding: 0 10px"
          >
            <div style="flex: 1">{{paperName}}</div>
            <el-button type="text">编辑试卷</el-button>
          </div>
          <div style="border-top: #ddd 1px solid;padding: 20px 10px">
            <div style="color:#9B9B9B">总分</div>
            <div style="color:#9B9B9B;margin-top: 20px;margin-bottom: 20px">试题数量</div>
            <div style="color:#9B9B9B">创建日期</div>
          </div>
        </div>

        <div style="border: #ddd 1px solid;border-radius: 5px;margin-top: 30px">
          <div
            style="display: flex;flex-direction: row;align-items: center;background: #fafafa;border-radius: 5px 5px 0 0;padding: 10px 10px"
          >
            <div>考试说明</div>
          </div>
          <div
            style="border-top: #ddd 1px solid;padding: 20px 10px 20px 10px;box-sizing: border-box;overflow: hidden"
          >
            <textarea class="brief" rows="7" v-model="dataForm.brief"></textarea>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="用户列表" :visible.sync="dialogTableVisible">
      <el-table
        :data="userList"
        v-loading="dataListLoading"
        border
        @selection-change="selectionChangeHandle"
      >
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column property="username" label="帐号" width="150"></el-table-column>
        <el-table-column property="realname" label="姓名" width="200"></el-table-column>
        <el-table-column property="depId" label="部门"></el-table-column>
        <el-table-column property="email" label="电子邮箱"></el-table-column>
        <el-table-column property="gender" label="性别"></el-table-column>
      </el-table>

      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerSelectUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      dataListLoading: true,
      paperName: this.$route.query.paperName,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {
        examName: this.$route.query.paperName,
        cateId: '',
        duration: '',
        passMark: '',
        paperId: this.$route.query.paperId,
        brief: '',
        startTime: '',
        endTime: ''
      },
      selectedUserList: [],
      cateList: [],
      userList: [],
      userListSelections: [],
      dataRule: {
        examName: [
          { required: true, message: '考试名称不能为空', trigger: 'blur' }
        ],
        cateId: [{ required: true, message: '分类不能为空', trigger: 'blur' }],
        duration: [
          { required: true, message: '答卷时长不能为空', trigger: 'blur' }
        ],
        passMark: [
          { required: true, message: '及格分数不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getCateList()
  },
  methods: {
    // 获取数据列表
    getCateList() {
      this.$http({
        url: this.$http.adornUrl('/exam-admin/exam/cate/select'),
        method: 'get'
      }).then(data => {
        if (data) {
          this.cateList = data.cateList
        } else {
          this.cateList = []
        }
      })
    },
    getUserList() {
      this.$http({
        url: this.$http.adornUrl('/usercenter-admin/user/list'),
        method: 'post',
        data: {
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key
        }
      }).then(data => {
        if (data && data.code === 200) {
          this.userList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.userList = []
          this.totalPage = 0
        }
        this.dialogTableVisible = true
        this.dataListLoading = false
      })
    },
    // 多选
    selectionChangeHandle(val) {
      this.userListSelections = val
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getUserList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getUserList()
    },
    handlerSelectUser() {
      for (let i = 0; i < this.userListSelections.length; i++) {
        this.selectedUserList.push(this.userListSelections[i])
      }
      this.dialogTableVisible = false
    },
    handlerRemoveUser(index) {
      this.selectedUserList.splice(index, 1)
    },
    handlerSaveExam() {
      // this.dataForm.startTime.time()
      // return false
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          let users = []
          if (this.selectedUserList && this.selectedUserList.length > 0) {
            for (let i = 0; i < this.selectedUserList.length; i++) {
              // users += this.selectedUserList[i].memberId + ','
              users.push(this.selectedUserList[i].memberId)
            }
          }
          this.$http({
            url: this.$http.adornUrl('/exam-admin/exam/save'),
            method: 'post',
            data: {
              name: this.dataForm.examName,
              cateId: this.dataForm.cateId,
              duration: this.dataForm.duration,
              passMark: this.dataForm.passMark,
              paperId: this.dataForm.paperId,
              brief: this.dataForm.brief,
              stime: this.dataForm.startTime.getTime(),
              etime: this.dataForm.endTime.getTime(),
              userIds: users
            }
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message.success('操作成功')
              this.$router.push({
                name: 'home'
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.brief {
  width: 100%;
  border: none;
  resize: none;
  min-height: 100%;
}
</style>
